<template>
  <div class="index-goodscard">
    <el-card>
      <el-button @click="addGoodsCate" type="primary">添加分类</el-button>
      <div class="index-table">
        <el-table
          :data="goodsCateList"
          style="width: 100%"
          row-key="cat_id"
          border
          :tree-props="{children: 'children', hasChildren: 'children.length'}"
        >
          <el-table-column prop="cat_name" label="名称" width="300"></el-table-column>
          <el-table-column align="center" prop="cat_id" label="是否有效" width="180">
            <template #default="scope">
              <div class="iconfont iconchenggong"></div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="cat_level" label="分级">
            <template #default="scope">
              <el-tag v-if="scope.row.cat_level==0">一级</el-tag>
              <el-tag type="success" v-if="scope.row.cat_level==1">二级</el-tag>
              <el-tag type="warning" v-if="scope.row.cat_level==2">三级</el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template #default="scope">
              <el-button
                type="primary"
                style="margin-right:10px;"
                @click="handleOperation(scope.row)"
                size="mini"
              >编辑</el-button>
              <el-button type="danger" @click="handleDeleteCate(scope.row.cat_id)" size="mini">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <!-- 添加商品分类 -->
    <el-dialog :title="cateTitle" v-model="dialogTableCate" width="700px">
      <div class="dialog-content">
        <span class="el-laber">分类名称:</span>
        <el-input placeholder="请填写分类名称" v-model="cateValue"></el-input>
        <div class="dialog-cascader" v-if="cateTitle!=='修改分类'">
          <span class="el-laber">商品分类:</span>
          <el-cascader
            :options="goodsTwoCateList"
            :props="{ value: 'cat_id', label: 'cat_name',checkStrictly: true }"
            v-model="selectVal"
            placeholder="父级分类"
            clearable
            @change="handleSeleteChange"
          ></el-cascader>
        </div>
      </div>
      <span class="dialog-footer">
        <el-button @click="dialogTableCate = false">取 消</el-button>
        <el-button type="primary" @click="handleDoCate">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { onMounted, ref, reactive, toRefs } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  GET_GOODSDATEAPI,
  ADD_NEWDOCATE,
  REVISE_NEWDOCATE,
  DELETE_NEWDOCATE,
} from '../../api/request'
export default {
  setup() {
    const state = reactive({
      goodsCateList: [], //全部商品分类列表
      goodsTwoCateList: [], //二级商品分类列表
      pageData: {
        type: 3,
        pagenum: 1, //第几页
        pagesize: 6, //一页多少条
      },
      dialogTableCate: false,
      cateTitle: '添加分类',
      cateValue: '',
      selectVal: '',
      nowCateData: {}, //当前操作的元素
      currentSelect: [], //当前选择的分类
    })
    onMounted(() => {
      getGoodsCate()
    })
    // 获取所有的商品分类
    const getGoodsCate = () => {
      GET_GOODSDATEAPI(state.pageData).then((res) => {
        const { data } = res
        state.goodsCateList = data
        console.log(state.goodsCateList)
      })
    }
    // 添加分类
    const addGoodsCate = () => {
      state.cateTitle = '添加分类'
      state.dialogTableCate = true
      state.cateValue = ''
      // 获取二级分类
      getGoodsTwoCate()
    }
    // 获取二级分类
    const getGoodsTwoCate = async () => {
      state.pageData.type = 2
      const { data } = await GET_GOODSDATEAPI(state.pageData)
      state.goodsTwoCateList = data
      console.log(state.goodsTwoCateList)
    }
    // 确认修改或添加
    const handleDoCate = () => {
      // 判断新增还是修改
      const { cateTitle, nowCateData } = state
      console.log('nowCateData', nowCateData)
      if (cateTitle == '修改分类') {
        const { cat_id, cat_name } = nowCateData
        REVISE_NEWDOCATE(cat_id, { cat_name: state.cateValue }).then((res) => {
          if (res.meta.status == 200) {
            ElMessage.success({ message: '修改成功' })
            state.dialogTableCate = false //关闭弹出层
            getGoodsCate() //重新获取数据
          }
        })
      } else addNewDoCate() //执行添加
    }
    // 添加新的分类
    const addNewDoCate = async () => {
      const id = state.currentSelect[state.currentSelect.length - 1] //获取最后一个id
      const params = { cat_level: 2, cat_name: state.cateValue, cat_pid: id }
      const res = await ADD_NEWDOCATE(params)
      if (res.meta.status == 201) {
        console.log(res, '成功')
        ElMessage.success('添加成功')
        state.goodsTwoCateList = [] //清空二级分类
        state.cateValue = '' //清空输入框内容
        state.dialogTableCate = false //关闭弹出层
        getGoodsCate() //添加成功 重新获取商品分类
      }
    }
    // 修改分类
    const handleOperation = (row) => {
      state.dialogTableCate = true
      state.cateTitle = '修改分类'
      state.nowCateData = row
      state.cateValue = row.cat_name //给输入框赋值
      console.log(state.nowCateData)
      //REVISE_NEWDOCATE(id,{cat_name:''}).then(res=>{console.log(res);})
    }
    // 删除分类
    const handleDeleteCate = (id) => {
      ElMessageBox.confirm('是否继续删除此分类?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          const res = await DELETE_NEWDOCATE(id)
          if (res.meta.status == 200) {
            ElMessage.success('删除成功')
            getGoodsCate() // 重新获取商品分类
          }
        })
        .catch(() => {
          ElMessage.error('已取消删除')
        })
    }
    const handleSeleteChange = (e) => {
      state.currentSelect = e
      // 选中的分类
    }
    return {
      ...toRefs(state),
      handleDoCate,
      addGoodsCate,
      handleSeleteChange,
      handleOperation,
      handleDeleteCate,
    }
  },
}
</script>

<style scoped lang="scss">
.index-goodscard {
  width: 100%;
  .index-table {
    margin-top: 20px;
  }
  .el-laber {
    margin-right: 12px;
  }
  .icon-dui {
    color: #569ef8;
  }
  .dialog-content {
    margin: 0 0 30px;
    .el-input {
      width: 80%;
    }
    .dialog-cascader {
      margin-top: 20px;
    }
  }
  .iconchenggong {
    color: #5ba0f2;
  }
}
</style>
